<template>
	<view v-if="loginFlag" class="page">


		<view>
			<view style='width: 185px;height: 185px;margin: 0 auto;margin-top: 40%;margin-bottom: 2%;'>
				<image src="../../static/370logo.png" mode=""></image>
			</view>
		</view>
		<view class="flexCenterCenter">
			<view class="container">
				<view style="text-align: center;margin-top: 30px;" class="btn">
					<view v-if="canIUse||canIGetUserProfile">
						<view>
							<van-button round v-if="canIGetUserProfile" type='info' open-type="getUserInfo" withCredentials="true" lang="zh_CN"
							 @click="bindGetUserInfo">绑定登录</van-button>
							<van-button v-else round open-type="getUserInfo" type='info' withCredentials="true" lang="zh_CN" @getuserinfo="bindGetUserInfo">绑定登录</van-button>
							<view style=" margin:30px auto;width: 80%;text-align: center;font-size: 14px;color:#485AFF;">
								仅限开通项目用户使用
							</view>
						</view>
					</view>
					<view v-else class="text-center">
						请升级微信版本
					</view>
					<!-- 	<view>
				<image :src="userInfo.avatarUrl" mode=""></image> -->
					<!-- {{userInfo.avatarUrl}} -->
					<!-- {{userInfo.city}}
				{{userInfo.country}}
				{{userInfo.gender}}
				{{userInfo.language}} -->
					<!-- {{userInfo.nickName}} -->

				</view>
			</view>


		</view>

		<van-dialog id="van-dialog" />
	</view>


</template>

<script>
	import {
		getWxUserInfo,
		wxLogin
	} from "../../api/login/index.js"
	import Dialog from '@/wxcomponents/vant-weapp/dialog/dialog.js';
	export default {
		data() {
			return {
				sessionKey: '',
				openId: '',
				nickName: null,
				avatarUrl: null,
				a: '41',
				userInfo: {
					nickName: '',
					avatarUrl: '',
					city: ''
				},
				unionid: '',
				openId: '',
				canIUse: uni.canIUse('button.open-type.getUserInfo'),
				canIGetUserProfile: false,
				loginFlag: false
			};
		},

		onLoad() {
			//登录
			this.login()

			//console.log(uni.getUserProfile);
			if (uni.getUserProfile) {
				this.canIGetUserProfile = true;
			}
			//判断若是版本不支持新版则采用旧版登录方式
			//查看是否授权
			if (!this.canIGetUserProfile) {
				uni.getSetting({
					success: function(res) {
						if (res.authSetting['scope.userInfo']) {
							uni.getUserInfo({
								provider: 'weixin',
								success: function(res) {
									console.log(res);
									console.log('uni.getSetting');
									_this.userInfo = res.userInfo;

									try {
										_this.login();
									} catch (e) {}
								},
								fail(res) {}
							});
						} else {
							// 用户没有授权
							console.log('用户还没有授权');
						}
					}
				});
			}


		},
		onShow() {

		},

		methods: {
			// 我们自己的登录

			myLogin(unionId) {
				// console.log('myLogin');
				wxLogin({
					unionId: unionId
				}).then(res => {
					// console.log(res.statusCode);
					if (res.data.code == 200) {
						// this.spaceFlag = true
						// console.log(this.loginFlag);
						uni.setStorageSync('spaceData', res.data.data.appSpaceVOList[0])
						uni.setStorageSync('realName', res.data.data)
						uni.setStorageSync('appSpaceVOList', res.data.data.appSpaceVOList)
						uni.redirectTo({
							url: `../home/home?id=${res.data.data.id}`
						});
						// this.loginFlag = true
					} else {

						this.loginFlag = true

					}

				})
			},
			//点击绑定   登录授权
			bindGetUserInfo(e) {
				var _this = this;

				if (this.canIGetUserProfile) {
					//新版登录方式
					uni.getUserProfile({
						desc: '登录',
						success: (res) => {

							console.log(res.userInfo);

							uni.setStorageSync('userInfo', res.userInfo)
							_this.userInfo = res.userInfo;
							uni.navigateTo({
								url: './realName'
							});
							// console.log(222222222);
							try {
								_this.login();
							} catch (e) {}
						},
						fail: (res) => {
							console.log('用户拒绝了授权')
						}
					});
				} else {
					//旧版登录方式
					if (e.detail.userInfo) {
						//用户按了允许授权按钮
						//console.log('手动');
						//console.log(e.detail.userInfo);
						_this.userInfo = e.detail.userInfo;
						try {
							_this.login();
						} catch (e) {}
					} else {
						console.log('用户拒绝了授权');
						//用户按了拒绝按钮
					}
				}

			},



			//登录
			login() {
				let _this = this;
				// 获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(res) {
						console.log(res.code);



						getWxUserInfo({
							code: res.code
							// unionId: res.data.unionid
						}).then(res => {
							console.log(res);
							if (res.data.code == 200) {
								_this.loginFlag = false


								let unionOpen = {
									unionid: res.data.data.unionId,
									openid: res.data.data.openId,
									session_key: res.data.data.sessionKey,
									
								}

								uni.setStorageSync('unionOpen', unionOpen)

								_this.myLogin(unionOpen.unionid)
							} else {
								_this.loginFlag = true
								let unionOpen = {
									unionid: res.data.data.unionId,
									openid: res.data.data.openId,
									session_key: res.data.data.sessionKey,
								
								}

								uni.setStorageSync('unionOpen', unionOpen)
								// uni.setStorageSync('unionOpen', unionOpen)
								_this.myLogin(unionOpen.unionid)
							}

						})
					},
				});
			},




		}

	}
</script>

<style scoped>
	.btn ::v-deep .van-button--info {
		width: 80%;
	}

	.container {
		padding: 0 15px 0;
		width: 100%;
	}

	.title {
		margin: 0 0 15px;
		text-align: center;
		user-select: none;
	}

	.flexCenterCenter {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;

	}

	.page {
		height: 100vh;
		overflow: hidden;
	}

	.logo,
	.title-text {
		display: inline-block;
		vertical-align: middle;
	}

	.title-text {
		font-size: 32px;
		margin-left: 15px;
		font-weight: 400;
		font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
	}

	.logo {
		width: 36px;
		height: 36px;
	}

	.btn ::v-deep .uni-button {
		background-color: #007AFF;

	}

	::v-deep .van-button--info {
		font-size: 15px;
		color: #fff;
		background-color: #007AFF;
		border: 1px solid #007AFF;
	}

	::v-deep image {
		width: 100%;
		height: 100%;
	}
</style>
